<%--
  Created by IntelliJ IDEA.
  User: teacher
  Date: 2023/7/13
  Time: 13:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
    <script>
        function f1(){
            let xhr;
            if(window.XMLHttpRequest){
                // 如果能够获取到Ajax引擎对象,则直接获取
                xhr = new XMLHttpRequest();
                console.log("通用方式:"+xhr);
            }else{
                // 如果无法获取,早期表示IE浏览器
                // 此时需要通过IE的方式获取
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                console.log("IE方式:"+xhr);
            }
        }

        function sayHello(){
            // 1.获取Ajax引擎对象
            let xhr = new XMLHttpRequest();
            // 2.准备回调函数
            // 回调函数:响应回来之后调用的函数
            // xhr.onreadystatechange = callback;
            xhr.onreadystatechange = function(){
                // console.log("我回来了")
                // 获取Ajax请求状态
                console.log(xhr.readyState);
                // 获取Http请求状态
                console.log(xhr.status);

                // 只有Ajax请求处理完成,且Http请求成功响应之后才需要基于响应结果做处理
                // 成功响应之后会返回响应数据,可以获取对应的响应数据
                // 基于这个响应数据做一些处理
                if(xhr.readyState == 4 && xhr.status == 200){
                    let result = xhr.responseText;
                    console.log(result);
                    document.getElementById("s1").innerHTML = result;
                }
            };

            // 建立与后端的连接
            xhr.open("get","${pageContext.request.contextPath}/sayHello")
            // 发送请求
            // get请求时参数基本都是null
            // 只有post请求才会在此处进行参数传递
            // post请求需要对请求头进行处理
            xhr.send(null);
        }

        function callback(){

        }
    </script>
</head>
<body>
<button onclick="f1()">获取Ajax引擎对象</button><br>
<button onclick="sayHello()">sayHello</button><span id="s1"></span>
</body>
</html>
